<!--
 * @Author: your name
 * @Date: 2022-01-12 13:41:32
 * @LastEditTime: 2022-01-12 14:33:25
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \testHtmld:\SoftWareProject\mySoft\myVUETest\src\components\elementList\Table.vue
-->
<template>
  <div class="dataIndex">
    <h1>表格相关</h1>

    <div class="dataIndex">
      <el-table :data="listData" stripe style="width: 600px" :header-cell-style="headClass" :cell-style="rowFn">
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="name" label="商品名称">
        </el-table-column>
        <el-table-column prop="value" label="数量" width="120">
        </el-table-column>
      </el-table>
    </div>
    <br />
    <hr>
    <h2>补数据</h2>

    <div class="dataIndex">
      <div class="header-cell-button">
        <el-button @click="setData()">补数据</el-button>
      </div>
      <el-table ref="tab" :data="listData" stripe style="width: 600px" :header-cell-style="headClass" :cell-style="rowFn">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="name" label="商品名称">
        </el-table-column>
        <el-table-column prop="value" label="数量" width="120">
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>选中的数据</span>
      <el-table ref="tab" :data="selectedData" stripe style="width: 600px" :header-cell-style="headClass" :cell-style="rowFn">
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="name" label="商品名称">
        </el-table-column>
        <el-table-column prop="value" label="数量" width="120">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Bus from "@/assets/js/bus.js";
export default {
  name: "tableBox",
  computed: {},
  data() {
    return {
      listData: [],
      Random: this.$Mock.Random,
      dialogVisible: false,
      selectedData: [],
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    init() {
      let me = this;
      me.listData = [];
      console.log("Random", me.Random);
      for (let i = 0; i < 10; i++) {
        me.listData.push({
          id: i,
          value: me.Random.natural(60, 1000),
          name: me.Random.string(7, 70),
        });
      }
    },
    headClass() {
      let obj = {
        "font-size": "14px",
        color: "#666",
        height: "40px",
        "text-align": "center",
        background: "#eef1f6",
        padding: 0,
      };
      obj["font-family"] =
        '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"';
      return obj;
    },
    rowFn(obj) {
      console.log("%o cellFn obj", obj);
      let { row, rowIndex, columnIndex } = obj;
      let classObj = {
        margin: "0 auto",
        "text-align": "left",
        color: "#212529",
        padding: 0,
        height: "40px",
      };
      if (row.isDel) {
        classObj.color = "#808080";
      }
      //任务名称和工作空间左对齐
      // if (columnIndex == 2 || columnIndex == 1) {
      //   classObj["text-align"] = "left";
      // }
      return classObj;
    },
    //补数据
    setData() {
      let tabData = this.$refs.tab.selection;
      console.log("tabData", tabData);
      if (tabData && tabData.length > 0) {
        this.selectedData = tabData;
        this.dialogVisible = true;
      }
    },
  },
};
</script>
<style scoped>
.dataIndex {
  height: 100%;
}
.header-cell-button {
  align-items: flex-start;
  display: flex;
  justify-content: end;
  width: 600px;
}
</style>
